<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ECharts 折线图颜色分段</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>

<body>
  <div id="chart" style="width: 800px; height: 500px;"></div>

  <script>
    // 初始化图表
    const chartDom = document.getElementById('chart');
    const myChart = echarts.init(chartDom);

    // 示例数据（含正负波动）
    const data = [120, 200, 150, 80, 70, 110, 130, 80, 100, 50];

    // 配置项
    const option = {
      legend: {},
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '销量',
        type: 'line',
        data: data,
        symbol: 'circle',     // 显示数据点
        symbolSize: 8,
        // 关键配置：动态线段颜色
        lineStyle: {
          width: 1,
          color: 'red',
          // color: (params) => {
          //   const index = params.dataIndex;

          //   // 首点无前驱线段，返回透明
          //   if (index === 0) return 'transparent';

          //   const prev = data[index - 1];
          //   const curr = data[index];

          //   // 上升线段：红色
          //   if (curr > prev) return '#ff0000';

          //   // 下降线段：绿色
          //   if (curr < prev) return '#00e400';

          //   // 持平：灰色
          //   return '#999';
          // }
        },

        // 数据点颜色（可选）
        itemStyle: {
          color: (params) => {
            const index = params.dataIndex;
            // 首点单独处理
            if (index === 0) return '#5470c6';

            const prev = data[index - 1];
            const curr = data[index];

            return curr > prev ? '#ff0000' :
              curr < prev ? '#00e400' : '#999';
          }
        }
      }],
      tooltip: {
        trigger: 'axis'
      },
      title: {
        text: '月度销售趋势分析',
        left: 'center'
      },
      grid: {
        top: '10%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      }
    };

    myChart.setOption(option);
  </script>
</body>

</html>